<template>
  <div class="photoinfo-container">
    <h3>{{photoinfo.name}}</h3>
    <p class="subtitle">
      <span>{{photoinfo.passtime}}</span>
      <span>点击:{{photoinfo.love}}次</span>
    </p>
    <hr />
    <!-- 缩略图区域 -->

    <!-- <vue-preview :slides="slide1" @close="handleClose"></vue-preview> -->
    <!-- <img class="preview-img" v-for="(item,index) in list" :src="item.profile_image" height="100" @click="$preview.open(index,list)" :key='item.profile_image'> -->
     <img class="preview-img" v-for="item in list" :src="item.profile_image" height="100" @close="handleClose" :key='item.profile_image'>

    <!-- 图片内容区域 -->
    <div class="content">{{photoinfo.text}}</div>
    <!-- 放置一个现成的 评论子组件 -->
    <cmt-box></cmt-box>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
// 导入评论子组件
import comment from "../subcomponents/comment.vue";

export default {
  data() {
    return {
      photoinfo: [], //存放图片的详情信息
      list:[],
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThumbs();
  },
  methods: {
    getPhotoInfo() {
      this.$http
        .get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          if (result.body.code == 200) {
            Toast("获取图片详情");
            console.log(result.body.data);
            this.photoinfo = result.body.data[0];
          } else {
            Toast("获取加载失败......");
          }
        });
    },
    handleClose() {
      console.log("close event");
    },
    getThumbs(){
        this.$http
        .get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          console.log(result.body);
       
          if (result.body.code == 200) {
         
            // this.slide = result.body.data;
            // 循环每张图片，设置其宽高
            result.body.data.forEach(item => {
                item.w = 600;
                item.h = 400;
            });
            // 把完整数据保存到slide1中
            this.list = result.body.data;
          } 
        });
    }
  },
  components: {
    //组成评论子组件
    "cmt-box": comment
  }
};
</script>

<style scoped>
.photoinfo-container {
  padding: 3px;
}
.photoinfo-container h3 {
  color: #26a2ff;
  font-size: 15px;
  text-align: center;
  margin: 15px 0;
}
.photoinfo-container .subtitle {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.photoinfo-container .content {
  font-size: 13px;
  line-height: 30px;
}
</style>
